<template>
    <div
        class="show-header"
        v-loading="loading.status"
		:element-loading-text="loading.txt">
        <!-- <div class="logo">
            <p class="title">Logo设置</p>
            <p class="tips"><i class="el-icon-info"></i>建议上传透明底色的图片</p>
            <div class="img-list">
                <el-upload
                    ref="upload"
                    list-type="picture-card"
                    :auto-upload="false"
                    :show-file-list="false"
                    :action="uploadAction"
                    :headers="headers"
                    :on-change="imgPreview"
                    :on-success="frontUpSuccess"
                    :on-error="frontUpError">
                    <div @click="changeRefName('upload')">
                        <div v-show="!frontPicture">
                            <div class="el-upload__text">上传 Logo</div>
                        </div>
                        <div v-show="frontPicture" class="cover-box">
                            <img :src="frontPicture" />
                            <div class="block">上传 Logo</div>
                        </div>
                    </div>
                    <p class="logo-tip">
                        <span>前台 Logo</span>
                        <span>推荐尺寸：190 x 48</span>
                    </p>
                </el-upload>
                <el-upload
                    ref="personUpload"
                    list-type="picture-card"
                    :auto-upload="false"
                    :show-file-list="false"
                    :action="uploadAction"
                    :headers="headers"
                    :on-change="imgPreview"
                    :on-success="personUpSuccess"
                    :on-error="personUpError">
                    <div @click="changeRefName('personUpload')">
                        <div v-show="!personPicture">
                            <div class="el-upload__text">上传 Logo</div>
                        </div>
                        <div v-show="personPicture" class="cover-box">
                            <img :src="personPicture" />
                            <div class="block">上传 Logo</div>
                        </div>
                    </div>
                    <p class="logo-tip">
                        <span>个人中心 Logo</span>
                        <span>推荐尺寸：190 x 48</span>
                    </p>
                </el-upload>
                <el-upload
                    ref="manageUpload"
                    list-type="picture-card"
                    :auto-upload="false"
                    :show-file-list="false"
                    :action="uploadAction"
                    :headers="headers"
                    :on-change="imgPreview"
                    :on-success="manageUpSuccess"
                    :on-error="manageUpError">
                    <div @click="changeRefName('manageUpload')">
                        <div v-show="!managePicture">
                            <div class="el-upload__text">上传 Logo</div>
                        </div>
                        <div v-show="managePicture" class="cover-box">
                            <img :src="managePicture" />
                            <div class="block">上传 Logo</div>
                        </div>
                    </div>
                    <p class="logo-tip">
                        <span>管理后台 Logo</span>
                        <span>推荐尺寸：260 x 40</span>
                    </p>
                </el-upload>
                <el-upload
                    ref="appUpload"
                    list-type="picture-card"
                    :auto-upload="false"
                    :show-file-list="false"
                    :action="uploadAction"
                    :headers="headers"
                    :on-change="imgPreview"
                    :on-success="appUpSuccess"
                    :on-error="appUpError">
                    <div @click="changeRefName('appUpload')">
                        <div v-show="!appPicture">
                            <div class="el-upload__text">上传 Logo</div>
                        </div>
                        <div v-show="appPicture" class="cover-box">
                            <img :src="appPicture" />
                            <div class="block">上传 Logo</div>
                        </div>
                    </div>
                    <p class="logo-tip">
                        <span>应用页 Logo</span>
                        <span>推荐尺寸：25 x 40</span>
                    </p>
                </el-upload>
            </div>
            <div style="margin-top: 90px">
                <el-button size="medium" type="primary" plain  @click="getImgInfo">重置</el-button>
                <el-button size="medium" type="primary" @click="submitForm('ruleForm')">保存设置</el-button>
            </div>
        </div>    -->
        <div class="nav">
            <p class="title">菜单导航栏设置</p>
            <div class="zh-tree-contents">
                <div class="frame-manage">
                    <ul class="frame-list">
                        <li><div class="ellips">序号</div></li>
                        <li><div class="ellips">模块</div></li>
                        <li><div class="ellips">链接地址</div></li>
                        <li><div class="ellips">状态</div></li>
                        <li><div class="ellips">操作</div></li>
                    </ul>
                    <el-tree
                        :data="navData"
                        :props="defaultProps"
                        node-key="id"
                        default-expand-all>
                        <div class="custom-tree-node" slot-scope="{node, data}">
                            <ul class="frame-list">
                                <!-- <li><div class="ellips">{{navData[0].inx++}}</div></li> -->
                                <li><div class="ellips">{{changeNumber(data)}}</div></li>
                                <li>
                                    <div class="ellips">
                                        <span v-show="node.level >= 2" class="gap"></span>
                                        <span v-html="data.name"></span>
                                    </div>
                                </li>
                                <li>
                                    <div class="ellips ellips-url">
                                        <el-tooltip class="item" effect="dark" placement="top">
                                            <div slot="content">{{data.url}}</div>
                                            <span>{{ data.url }}</span>
                                        </el-tooltip>
                                    </div>
                                </li>
                                <li>
                                    <div class="ellips">
                                        <el-switch v-model="data.enable" @change="changeSwitch(data)"></el-switch>
                                        <span v-if="data.enable === false">禁用中</span>
                                        <span v-if="data.enable === true">启用中</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="ellips">
                                        <el-button
                                            type="text"
                                            size="mini"
                                            @click.stop="saveBox(data)"
                                        >
                                            编辑
                                        </el-button>
                                        <el-button
                                            type="text"
                                            size="mini"
                                            class="delete-button"
                                            @click.stop="deleteRow(data)"
                                            v-if="data.is_default !== 1"
                                        >
                                            删除
                                        </el-button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </el-tree>
                    <el-button class="add-menu" @click="addRow"><i class="el-icon-plus"></i></el-button>
                </div>
            </div>
        </div>
        <el-dialog title="编辑" :visible.sync="isEdit" width="400px" class="edit-form" :before-close="editCancel" :close-on-click-modal="false">
            <el-form :model="editForm" ref="editForm" :rules="rules" status-icon label-position="left" label-width="120px">
                <el-form-item label="模块名称：" prop="name">
                    <el-input
                        v-model="editForm.name"
                        placeholder="请输入模块名称"
                        autocomplete="off"
                        :maxlength="parseInt(6)"
                        @change="trimEdit"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="enable">
                    <el-radio-group v-model="editForm.enable">
                        <el-radio :label="true">启用</el-radio>
                        <el-radio :label="false">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="editCancel">取消</el-button>
                <el-button type="primary" @click="editMenuNav('editForm')">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="isCustom === true ? '编辑自定义导航' : '添加自定义导航'" :before-close="cancelMenuNav" :visible.sync="isAdd" width="500px" class="add-form" :close-on-click-modal="false">
            <el-form :model="addForm" ref="addForm" :rules="rules" status-icon label-position="left" label-width="120px">
                <el-form-item label="模块名称：" prop="name">
                    <el-input
                        v-model="addForm.name"
                        placeholder="请输入模块名称"
                        autocomplete="off"
                        :maxlength="parseInt(6)"
                        @change="trimAdd"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="链接地址：" prop="url">
                    <el-input
                        v-model="addForm.url"
                        placeholder="请输链接地址"
                        autocomplete="off"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="打开方式：" prop="is_new_form">
                    <el-radio-group v-model="addForm.is_new_form">
                        <el-radio :label="true">新窗口打开</el-radio>
                        <el-radio :label="false">本页打开</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态：" prop="enable">
                    <el-radio-group v-model="addForm.enable">
                        <el-radio :label="true">启用</el-radio>
                        <el-radio :label="false">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <p class="tips"><i class="el-icon-info"></i>自定义链接只允许添加一级导航，即不允许添加二级导航</p>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="cancelMenuNav()">取消</el-button>
                <el-button type="primary" @click="addMenuNav('addForm')">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog
			title="图片设置"
			:visible.sync="cropperViews"
			width="1000px"
			custom-class="croppering"
			:close-on-click-modal="false">
			<div class="croppering">
				<div class="cropper">
					<vueCropper
						ref="cropper"
						:img="imgOption.img"
						:outputSize="imgOption.size"
						:outputType="imgOption.outputType"
						:info="true"
						:full="imgOption.full"
						:canMove="imgOption.canMove"
						:canMoveBox="imgOption.canMoveBox"
						:fixedBox="imgOption.fixedBox"
						:original="imgOption.original"
						:autoCrop="imgOption.autoCrop"
						:autoCropWidth="imgOption.autoCropWidth"
						:autoCropHeight="imgOption.autoCropHeight"
						:centerBox="imgOption.centerBox"
						:high="imgOption.high"
						:infoTrue="imgOption.infoTrue"
						:enlarge="imgOption.enlarge">
					</vueCropper>
				</div>
                <div slot="footer" class="dialog-footer cropper_btn">
                    <el-button  @click="clearFilet()">取消</el-button>
                    <el-button type="primary" @click="finish('base64')">确定</el-button>
                </div>
			</div>
		</el-dialog>
    </div>
</template>
<script>
import { VueCropper }  from 'vue-cropper';
import {dataURLtoFile} from './../../../tools/tool';

export default {
    components: {
        VueCropper,
    },
    data() {
        return {
            headers: {
                Authorization: `Bearer ` + this.$g.access_token
            },
            uploadAction: this.BASE_URL + '/api/resource/res_upload',
            refName: null,
            // 前台 Logo
            isFront: false, // 是否修改图片
            frontPicture: '', // 显示图片预览
            frontRetryTimes: 100, //文件最大重传次数
            // 后台 logo
            isManage: false,
            managePicture: '',
            manageRetryTimes: 100,
            //  个人中心 logo
            isPerson: false,
            personPicture: '',
            personRetryTimes: 100,
            // 应用 logo
            isApp: false,
            appPicture: '',
            appRetryTimes: 100,
            cropperViews: false, // 是否显示图片裁剪的模态框
            imgOption: { // vue-cropper 参数配置
                img: '', // 裁剪图片的地址
                size: 1, // 裁剪生成图片的质量
                full: false, // 是否输出原图比例的截图
                outputType: 'png', //输出图片格式
                canMove: true, //能否拖动图片
                fixedBox: true, //截图框固定大小
                original: false, //否显示原始宽高
                canMoveBox: true,  //能否拖动截图框
                autoCrop: true, //autoCrop 是否自动生成截图框
                // 只有自动截图开启 宽度高度才生效
                autoCropWidth: 250,
                autoCropHeight: 50,
                centerBox: false, //截图框是否限制在图片里
                high: false //是否根据dpr生成适合屏幕的高清图片
            },
            loading:{
                status: false,
                txt:' 获取数据...'
            },
            defaultProps: {
                label: 'name',
            },
            navData: [],
            isEdit: false,
            editForm: {
                id: null,
                pid: null,
                url: null,
                name: null,
                enable: false,
                is_default: 0,
                is_new_form: null
            }, // 编辑数据
            isAdd: false,
            isCustom: false,
            addForm: {
                id: null,
                url: null,
                name: null,
                is_default: 0,
                is_new_form: false,
                enable: true,
            },
            rules: {
                name: [
                    { required: true, message: '请输入模块名称', trigger: 'blur' },
                    { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
                ],
                enable: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],
                url: [
                    {pattern: this.rules.link.reg, message: this.rules.link.msg, trigger: 'blur'}
                ],
                is_new_form: [
                    { required: true, message: '请输入打开方式', trigger: 'blur' },
                ]
            },
            /* 添加自定义链接的时候，第一次重新获取数据，排序错误，第二次没有问题，等待以后优化 */
            resetNav: false,
            logoData: [],
            f_logo: null,
            m_logo: null,
            t_logo: null,
            app_logo: null,
            imageType: ['image/jpeg', 'image/bmp', 'image/png'] // 上传图片格式
        }
    },
    created() {
        this.getImgInfo();
        this.getNavInfo();
    },
    methods: {
        // 去掉编辑模块名称的前后空格
        trimEdit(name){
            this.editForm.name = name.trim();
        },
        // 添加自定义导航模块名称的前后空格
        trimAdd(name){
            this.addForm.name = name.trim();
        },
        changeNumber(val) {
            let number =  this.navData[0].inx++;
            val.numberIndex = number;
            return number;
        },
        editCancel() {
            this.isEdit = false;
            this.$refs.editForm.clearValidate();
        },
        /**
         * 改变截图框大小
         */
        changeRefName(name) {
            this.refName = name;

            if (name === 'upload') {
                this.imgOption.autoCropWidth = 190;
                this.imgOption.autoCropHeight = 48;
            } else if (name === 'personUpload') {
                this.imgOption.autoCropWidth = 190;
                this.imgOption.autoCropHeight = 48;
            } else if (name === 'manageUpload') {
                this.imgOption.autoCropWidth = 260;
                this.imgOption.autoCropHeight = 40;
            } else if (name === 'appUpload') {
                this.imgOption.autoCropWidth = 25;
                this.imgOption.autoCropHeight = 40;
            }
        },
		//清空上传控件列表的数据
        clearFilet() {
            this.cropperViews = false;
            this.$refs[this.refName].uploadFiles = [];
        },
		//图片裁剪后替换原图片
        finish(type) {
            if (type === 'blob') {
                this.$refs.cropper.getCropBlob((data) => {
                    this.cropperViews = false;
                })
            } else {
                this.$refs.cropper.getCropData((data) => {
                    let modelView = dataURLtoFile(data, this.$refs[this.refName].uploadFiles[this.$refs[this.refName].uploadFiles.length -1].name, 'png');

                    if (modelView.size > 10240000) {
                        this.$message.warning('只允许上传10M以内的文件');
                        this.clearFilet();
                    } else {
                        modelView.uid = this.$refs[this.refName].uploadFiles[this.$refs[this.refName].uploadFiles.length -1].uid;

                        this.$refs[this.refName].uploadFiles[this.$refs[this.refName].uploadFiles.length -1].raw = modelView;
                        this.$refs[this.refName].uploadFiles[this.$refs[this.refName].uploadFiles.length -1].size = modelView.size;

                        switch (this.refName) {
                            case 'upload':
                                this.isFront = true;
                                this.frontPicture = data;
                                break;
                            case 'manageUpload':
                                this.isManage = true;
                                this.managePicture = data;
                                break;
                            case 'personUpload':
                                this.isPerson = true;
                                this.personPicture = data;
                                break;
                            case 'appUpload':
                                this.isApp = true;
                                this.appPicture = data;
                                break;
                        }

                        this.cropperViews = false;

                        if (this.isFront && this.frontPicture != '') {
                            this.imgUpload('upload');
                        }
                        if (this.isPerson && this.personPicture != '') {
                            this.imgUpload('personUpload');
                        }
                        if (this.isManage && this.managePicture != '') {
                            this.imgUpload('manageUpload');
                        }
                        if (this.isApp && this.appPicture != '') {
                            this.imgUpload('appUpload');
                        }
                    }
                })
            }
        },
        imgPreview(file, fileList) {
            const isLt2M = file.size / 1024 / 1024 < 10;

            if (file.status === 'ready') {
                /*图片上传之前做校验，限制大小以及类型 */
                let file_type = file.raw.type.toLocaleLowerCase();

                if (!this.imageType.includes(file_type)) {
                    this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片');
                    this.$refs[this.refName].uploadFiles = [];

                    return false;
                } else if(!isLt2M) {
                    this.$message.warning('上传图片大小不能超过 10MB!');

                    return false;
                } else {
                    this.imgOption.img = window.URL.createObjectURL(file.raw);
                    this.cropperViews = true;
                }
            }
        },
        imgUpload(refName) {
            // 获取最后一张图片，避免上传多张图片
            let fileList = this.$refs[refName].uploadFiles;

            if (fileList.length > 1) {
                this.$refs[refName].uploadFiles = [];
                this.$refs[refName].uploadFiles.push(fileList[fileList.length - 1])
            }

            this.$refs[refName].submit();
        },
        // 前台
        frontUpSuccess(response, file, fileList) {
            // response.data =  response.data.data;

            // 把本地图片地址换成服务器图片地址
            this.$refs.upload.uploadFiles = [];
            this.frontPicture = this.BASE_URL + response.data.file_path;
            this.f_logo = response.data.file_path;
            this.refName = null;
            this.isFront = false;
            this.frontRetryTimes = 100;
            this.$message({ message: response.msg, type: 'success' });
        },
        frontUpError(err, file, fileList) {
            var mess = eval('(' + err + ')');

            if( parseInt( mess.error ) === 401 && this.frontRetryTimes > 0){
                let callbcak = ( data=>{
                    this.frontRetryTimes--;
                    this.$refs.upload.submit(file);
                })
                this.get_access_token( callbcak );
            }else{
                this.$message.error(mess.msg);
            }
        },
        // 后台管理
        manageUpSuccess(response, file, fileList) {
            // response.data =  response.data.data;

            // 把本地图片地址换成服务器图片地址
            this.$refs.manageUpload.uploadFiles = [];
            this.managePicture = this.BASE_URL + response.data.file_path;
            this.m_logo = response.data.file_path;
            this.refName = null;
            this.isManage = false;
            this.manageRetryTimes = 100;
            this.$message({ message: response.msg, type: 'success' });
        },
        manageUpError(err, file, fileList) {
            var mess = eval('(' + err + ')');

            if( parseInt( mess.error ) === 401 && this.manageRetryTimes > 0){
                let callbcak = ( data=>{
                    this.manageRetryTimes--;
                    this.$refs.manageUpload.submit(file);
                })
                this.get_access_token( callbcak );
            }else{
                this.$message.error(mess.msg);
            }
        },
        // 个人中心
        personUpSuccess(response, file, fileList) {
            // response.data =  response.data.data;

            // 把本地图片地址换成服务器图片地址
            this.$refs.personUpload.uploadFiles = [];
            this.personPicture = this.BASE_URL + response.data.file_path;
            this.t_logo = response.data.file_path;
            this.refName = null;
            this.isPerson = false;
            this.personRetryTimes = 100;
            this.$message({ message: response.msg, type: 'success' });
        },
        personUpError(err, file, fileList) {
            var mess = eval('(' + err + ')');

            if( parseInt( mess.error ) === 401 && this.personRetryTimes > 0){
                let callbcak = ( data=>{
                    this.personRetryTimes--;
                    this.$refs.personUpload.submit(file);
                })
                this.get_access_token( callbcak );
            }else{
                this.$message.error(mess.msg);
            }
        },
        // 应用
        appUpSuccess(response, file, fileList) {
            // response.data =  response.data.data;

            // 把本地图片地址换成服务器图片地址
            this.$refs.appUpload.uploadFiles = [];
            this.appPicture = this.BASE_URL + response.data.file_path;
            this.app_logo = response.data.file_path;
            this.refName = null;
            this.isApp = false;
            this.appRetryTimes = 100;
            this.$message({ message: response.msg, type: 'success' });
        },
        appUpError(err, file, fileList) {
            var mess = eval('(' + err + ')');

            if( parseInt( mess.error ) === 401 && this.appRetryTimes > 0){
                let callbcak = ( data=>{
                    this.appRetryTimes--;
                    this.$refs.appUpload.submit(file);
                })
                this.get_access_token( callbcak );
            }else{
                this.$message.error(mess.msg);
            }
        },
        /**
         * 重置logo设置
         */
        resetForm() {
            let success = (res => {
                this.$message.success(res.msg)
                this.getImgInfo();
            });

            let params = {
                f_logo: '',
                m_logo: '',
                t_logo: '',
                app_logo: ''
            }

            this.$ajax.put('api/system/save_logo', params, {func: {success: success}})
        },
        submitForm() {
            let success = ( data => {
                this.$message.success(data.msg)
                this.getImgInfo();
            });

            let params = {
                f_logo: this.f_logo ? this.f_logo : this.frontPicture.split(this.BASE_URL)[1],
                m_logo: this.m_logo ? this.m_logo : this.managePicture.split(this.BASE_URL)[1],
                t_logo: this.t_logo ? this.t_logo : this.personPicture.split(this.BASE_URL)[1],
                app_logo: this.app_logo ? this.app_logo : this.appPicture.split(this.BASE_URL)[1]
            }

            this.$ajax.put('api/system/save_logo', params, {func: {success: success}})
        },
        /**
         * Logo设置
         */
        getImgInfo() {
            this.loading.status = true;

            let success = res => {
                this.loading.status = false;
                this.logoData = deep_clone(res.data);
                this.frontPicture = this.BASE_URL + this.logoData[0].f_logo;
                this.managePicture = this.BASE_URL + this.logoData[0].m_logo;
                this.personPicture = this.BASE_URL + this.logoData[0].t_logo;
                this.appPicture = this.BASE_URL + this.logoData[0].app_logo;
                this.f_logo = null;
                this.m_logo = null;
                this.t_logo = null;
                this.app_logo = null;
            };

            let fail = data => {
                this.loading.status = false;
                this.$message.error(data.msg);
            };

            this.$ajax.get("api/system/get_logo", { params: {}, func: { success: success, fail: fail } });
        },
        // 菜单导航栏设置
        getNavInfo() {
            this.loading.status = true;
            // 重写成功回调
            let success = res => {
                this.loading.status = false;
                this.navData = deep_clone(res.data);

                if(this.navData.length > 0 ){
                    this.navData[0].inx = 1;

                    this.navData.forEach( item => {
                        if (item.enable === 1) {
                            item.enable = true;
                        } else {
                            item.enable = false;
                        }

                        if (item.children.length > 0) {
                            item.children.forEach(val => {
                                 if (val.enable === 1) {
                                    val.enable = true;
                                } else {
                                    val.enable = false;
                                }
                            })
                        }
                    })
                }

                this.$forceUpdate(); //强制渲染
            };

            let fail = data => {
                this.loading.status = false;
                this.$message.error(data.msg);
            };
            this.$ajax.get("api/system/get_home_menu", { params: {check_no_enable: 1}, func: { success: success, fail: fail } });
        },
        saveBox(data) {
            if (data.is_default === 1) {
                this.isEdit = true;
                this.editForm = deep_clone(data);
            } else {
                this.isAdd = true;
                this.isCustom = true;
                this.addForm = deep_clone(data);

                if (this.addForm.is_new_form === 1) {
                    this.addForm.is_new_form = true;
                } else {
                    this.addForm.is_new_form = false;
                }
            }
        },
        editMenuNav(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.isEdit = false;

                    let success = ( data => {
                        this.$message.success(data.msg);
                        this.getNavInfo();
                    });
                    let fail = (data => {
                        this.$message.error(data.msg);
                    })
                    let params = {
                        id: this.editForm.id,
                        pid: this.editForm.pid,
                        url: this.editForm.url,
                        name: this.editForm.name,
                        is_default: this.editForm.is_default,
                        enable: this.editForm.enable === true ? 1 : 0,
                        is_new_form: this.editForm.is_new_form
                    }

		    	    this.$ajax.post('api/system/save_home_menu', params, {func: {success: success, fail: fail}})
                } else {
                    return false;
                }
            });
        },
        deleteRow(data) {
            this.$confirm('是否删除该记录？, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let success = ( data => {
                    this.$message.success(data.msg);
                    this.getNavInfo();
                });
                let fail = (data => {
                    this.$message.error(data.msg);
                });

                this.$ajax.delete('api/system/del_home_menu', {params:{id: data.id}, func: {success: success, fail: fail}});
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        changeSwitch(data) {
            // 重置索引，避免点击事件把索引累加
            this.navData[0].inx = data.numberIndex;

            let success = ( data => {
                this.$message.success(data.msg);
                this.getNavInfo();
            });
            let fail = (data => {
                this.$message.error(data.msg);
            })
            let params = {
                id: data.id,
                pid: data.pid,
                url: data.url,
                name: data.name,
                enable: data.enable === true ? 1 : 0,
                is_new_form: data.is_new_form
            }

            this.$ajax.post('api/system/save_home_menu', params, {func: {success: success, fail: fail}})
        },
        addRow() {
            this.isAdd = true;
            this.addForm.name = '';
            this.addForm.url = '';

            this.$nextTick(() => {
                this.$refs.addForm.clearValidate();
            })
        },
        cancelMenuNav() {
            this.$refs.addForm.clearValidate();
            this.isAdd = false;
            this.isCustom = false;
            this.addForm = {
                id: null,
                url: null,
                name: null,
                is_default: 0,
                is_new_form: false,
                enable: true,
            }
        },
        addMenuNav(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.isAdd = false;

                    let success = ( data => {
                        this.$message.success(data.msg);
                        this.getNavInfo();

                        if (this.resetNav === true) {
                            this.getNavInfo();
                        }

                        this.resetNav = false;
                    });
                    let fail = (data => {
                        this.$message.error(data.msg);
                    })
                    let params = {
                        pid: 0,
                        url: this.addForm.url,
                        name: this.addForm.name,
                        is_default: this.addForm.is_default,
                        enable: this.addForm.enable === true ? 1 : 0,
                        is_new_form: this.addForm.is_new_form === true ? 1 : 0
                    }

                    if (this.isCustom === true) {
                        this.isCustom = false;
                        params.id = this.addForm.id;
                        this.$ajax.post('api/system/save_home_menu', params, {func: {success: success, fail: fail}});
                    } else {
                        this.resetNav = true;
                        this.$ajax.post('api/system/add_home_menu', params, {func: {success: success, fail: fail}});
                    }
                } else {
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="scss">
    .show-header {
        .logo-tip {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            line-height: 16px;

            >span:last-child {
                padding-top: 10px;
                color: #999;
            }
        }

        .ellips-url {
            max-width: 330px;
        }

        .title {
            font-size: 16px;
            font-weight: bold;
        }

        .logo {
            margin-bottom: 80px;

            .img-list {
                margin-top: -40px;

                >div {
                    display: inline-block;
                    width: 305px;
                }

                >div {
                    margin-top: 60px;
                    margin-right: 20px;
                }

                .el-upload--picture-card {
                    width: 305px;
                    height: 80px;
                    line-height: 80px;

                    >div {
                        height: inherit;
                    }

                    .el-upload__text {
                        line-height: 78px;
                    }
                }
            }

            .cover-box {
                position: relative;
                height: 100%;
                line-height: 80px;
                display: flex;
                justify-content: center;
                align-items: center;

                >img {
                    width: 90%;
                    height: 90%;
                    object-fit: contain;
                }

                .block {
                    display: none;
                }

                &:hover .block {
                    display: block;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    color: #fff;
                    font-size: 17px;
                    background-color: rgba(0, 0, 0, 0.7);
                }
            }
        }

        .nav {
            .frame-manage {
                .el-tree {
                    height: auto;
                }

                .frame-list {
                    display: flex;
                    height: 40px;
                    line-height: 40px;
                    background: #ddd;
                    color: #000;
                    text-align: center;

                    li {
                        flex: 1;
                        box-sizing: border-box;

                        &:nth-of-type(1) {
                            flex: 0 0 50px;
                        }

                        &:nth-of-type(3) {
                            flex: 0 0 350px;
                        }
                    }
                }

                 .custom-tree-node {
                    width: 100%;

                    .frame-list {
                        background: none;
                        border-bottom: 1px solid #ddd;

                        li {
                            position: relative;
                            border-left: 1px solid #ddd;

                            &:last-child {
                                border-right: 1px solid #ddd;
                            }
                        }
                    }
                }

                .el-tree-node__content {
                    .el-tree-node__content {
                        padding-left: 0 !important;
                        height: auto;
                    }
                    li:nth-of-type(2) .ellips {
                        text-align: left;
                        padding-left: 20px;

                        .gap {
                            display: inline-block;
                            width: 18px;
                        }
                    }

                    li:nth-of-type(3) .ellips {
                        text-align: left;
                        padding-left: 20px;
                    }
                }
            }

            .button {
                margin-top: 50px;
            }

            .add-menu {
                margin-top: 30px;
                width: 50px;
                height: 35px;
            }
        }

        .add-form,
        .edit-form {
            .el-form-item {
                label {
                    text-align: right;
                }
            }

            .tip {
                padding-left: 25px;
            }
        }

        .tips {
            color: #bbb;

            i {
                padding-right: 10px;
            }
        }

        .croppering {
            .cropper {
                height: 500px;

                >div{
                    height: 100%;
                }
            }

            .dialog-footer {
                padding: 35px 0;
                text-align: center;

                button {
                    padding: 10px 30px;
                }
            }

            .vue-cropper {
                position: relative;
                width: 100%;
                height: 500px;
                box-sizing: border-box;
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                direction: ltr;
                touch-action: none;
                text-align: left;
                background-image: url("");
            }

            .cropper-box,
            .cropper-box-canvas,
            .cropper-drag-box,
            .cropper-crop-box,
            .cropper-face {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                user-select: none;
            }

            .cropper-box-canvas img {
                position: relative;
                text-align: left;
                user-select: none;
                transform: none;
                max-width: none;
                max-height: none;
            }

            .cropper-box {
                overflow: hidden;
            }

            .cropper-move {
                cursor: move;
            }

            .cropper-crop {
                cursor: crosshair;
            }

            .cropper-modal {
                background: rgba(0, 0, 0, 0.5);
            }

            .cropper-view-box {
                display: block;
                overflow: hidden;
                width: 100%;
                height: 100%;
                outline: 1px solid #39f;
                outline-color: rgba(51, 153, 255, 0.75);
                user-select: none;
            }

            .cropper-view-box img {
                user-select: none;
                text-align: left;
                max-width: none;
                max-height: none;
            }

            .cropper-face {
                top: 0;
                left: 0;
                background-color: #fff;
                opacity: 0.1;
            }

            .crop-info {
                position: absolute;
                left: 0px;
                min-width: 65px;
                text-align: center;
                color: white;
                line-height: 20px;
                background-color: rgba(0, 0, 0, 0.8);
                font-size: 12px;
            }

            .crop-line {
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                opacity: 0.1;
            }

            .line-w {
                top: -3px;
                left: 0;
                height: 5px;
                cursor: n-resize;
            }

            .line-a {
                top: 0;
                left: -3px;
                width: 5px;
                cursor: w-resize;
            }

            .line-s {
                bottom: -3px;
                left: 0;
                height: 5px;
                cursor: s-resize;
            }

            .line-d {
                top: 0;
                right: -3px;
                width: 5px;
                cursor: e-resize;
            }

            .crop-point {
                position: absolute;
                width: 8px;
                height: 8px;
                opacity: 0.75;
                background-color: #39f;
                border-radius: 100%;
            }

            .point1 {
                top: -4px;
                left: -4px;
                cursor: nw-resize;
            }

            .point2 {
                top: -5px;
                left: 50%;
                margin-left: -3px;
                cursor: n-resize;
            }

            .point3 {
                top: -4px;
                right: -4px;
                cursor: ne-resize;
            }

            .point4 {
                top: 50%;
                left: -4px;
                margin-top: -3px;
                cursor: w-resize;
            }

            .point5 {
                top: 50%;
                right: -4px;
                margin-top: -3px;
                cursor: e-resize;
            }

            .point6 {
                bottom: -5px;
                left: -4px;
                cursor: sw-resize;
            }

            .point7 {
                bottom: -5px;
                left: 50%;
                margin-left: -3px;
                cursor: s-resize;
            }

            .point8 {
                bottom: -5px;
                right: -4px;
                cursor: se-resize;
            }
        }
    }
</style>
